<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="550"></canvas>

    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Center point and radii
        const cx = canvas.width / 2;
        const cy = 250;
        const r1 = 120;
        const r2 = 190;

        // Styling
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // Draw the outer circle (radius R2)
        ctx.beginPath();
        ctx.arc(cx, cy, r2, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw the inner circle (radius R1)
        ctx.beginPath();
        ctx.arc(cx, cy, r1, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw the dashed lines for the radii
        ctx.setLineDash([6, 6]);

        // Dashed line for R1
        const angle1 = -40 * Math.PI / 180; // Angle in radians
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + r1 * Math.cos(angle1), cy + r1 * Math.sin(angle1));
        ctx.stroke();

        // Dashed line for R2
        const angle2 = -150 * Math.PI / 180; // Angle in radians
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + r2 * Math.cos(angle2), cy + r2 * Math.sin(angle2));
        ctx.stroke();

        // Reset to solid lines for text
        ctx.setLineDash([]);

        // Add labels
        // R1
        ctx.font = "italic 28px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText("R", cx + 70, cy - 25);
        ctx.font = "italic 20px 'Times New Roman'";
        ctx.fillText("1", cx + 82, cy - 18);

        // R2
        ctx.font = "italic 28px 'Times New Roman'";
        ctx.fillText("R", cx - 80, cy - 80);
        ctx.font = "italic 20px 'Times New Roman'";
        ctx.fillText("2", cx - 68, cy - 73);

        // Sigma1, Epsilon1 (σ₁, ε₁)
        const sigma1_epsilon1 = "\u03c3\u2081, \u03b5\u2081";
        ctx.font = "italic 28px 'Times New Roman'";
        ctx.fillText(sigma1_epsilon1, cx, cy + 60);

        // Sigma2, Epsilon2 (σ₂, ε₂)
        const sigma2_epsilon2 = "\u03c3\u2082, \u03b5\u2082";
        ctx.fillText(sigma2_epsilon2, cx, cy + 155);
        
        // Caption
        ctx.font = "24px 'SimSun'"; // A common font for Chinese characters
        ctx.fillText("电图 4.4.1", cx, cy + r2 + 60);

    </script>
</body>
</html>